<template>
	<view>

		<view class="title">
			<view class="title-c">
				<view class="left">
					<image src="../../static/icons/chat.png" mode=""></image>
				</view>
				<view class="mid">
					<text :class="{active:show==1}" @click="show=1">推荐</text>
					<text :class="{active:show==2}" @click="show=2">品牌</text>
				</view>
				<view class="right">
					<image src="../../static/icons/search.png" mode=""></image>
					<image src="../../static/icons/cart.png" mode=""></image>
				</view>
			</view>

		</view>

		<view class="center" v-show="show==1">
			<view class="uni-padding-wrap">
				<view class="page-section swiper">
					<view class="page-section-spacing">
						<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
							<swiper-item v-for="item in swiperlist" :key="item.id">
								<view class="swiper-item uni-bg-red">
									<image class="swiperimg" :src="item.img_url" mode=""></image>
								</view>
							</swiper-item>

						</swiper>
					</view>
				</view>
			</view>

			<view class="akey">
				<view class="left">
					品类推荐
				</view>
				<view class="right">
					更多
					<image src="../../static/icons/arr-r-1.png" mode=""></image>
				</view>
			</view>

			<view class="category">
				<view class="category-c" v-for="item in brandList" :key="item.id">
					<view class="picutre">
						<image :src="item.bg_img" mode=""></image>
					</view>
					<view class="title-a">
						<view>
							{{item.cname}}
						</view>
						<view>
							{{item.ename}}
						</view>


					</view>
				</view>
			</view>


			<view class="akey">

				<view class="left">
					特色优选
				</view>
				<view class="right">
					更多
					<image src="../../static/icons/arr-r-1.png" mode=""></image>
				</view>
			</view>

			<view class="characteristic">
				<view class="characteristic-c" @click="godetal(item.id)" v-for="item in hotList" :key="item.id">
					<view class="charactpicture">
						<image :src="item.cover_img" mode=""></image>
					</view>
					<view class="title-d">
						<view>
							{{item.gname}}
						</view>
						<view>
							{{item.detail_desc}}
						</view>
					</view>

				</view>
			</view>


		</view>



		<view class="center-b" v-show="show==2">
			<view class="greentitle">

			</view>
			<view class="details-a" v-for="item in pinpailist" :key="item.id">
				<view class="on">
					<image :src="item.coverImg" mode=""></image>
				</view>
				<view class="qiu">

				</view>
				<view class="under">

					<view>
						{{item.cname}}
					</view>
					<view>
						{{item.descr}}
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import HomeApi from '@/api/home/index.js'
	export default {
		data() {
			return {

				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				swiperlist: [],
				show: '1',
				brandList: [],
				hotList: [],
				pinpailist: [],
				start: '2'

			}
		},
		methods: {
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			godetal(id){
				console.log(id)
				uni.navigateTo({
				    url: '/pages/index/product/detal/detal?productId='+id
				});
			},
			
			getswiperlist() {
				HomeApi.banner({
					use: 0
				}).then((res => {
					this.swiperlist = res.data.data
				}))
			},
			getbrandList() {
				HomeApi.brandList().then((res => {

					this.brandList = res.data.data

				}))
			},
			gethotList() {
				HomeApi.hotList().then((res => {

					this.hotList = res.data.data

				}))
			},
			getpinpaiList() {
				HomeApi.pinpaiList().then((res) => {

					this.pinpailist = res.data.data
				})
			},

		},
		onLoad() {
			this.getswiperlist();
			this.getbrandList();
			this.gethotList();
			this.getpinpaiList()
			uni.startPullDownRefresh()
		},
		onPullDownRefresh() {

			var a = {
				start: this.start
			}
			HomeApi.pinpaiList(
				a
			).then((res) => {
				console.log(res)
				this.pinpailist = '',
					this.start++,

					this.pinpailist = res.data.data
				uni.stopPullDownRefresh();
			})
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		height: 50rpx;
		position: fixed;
		z-index: 999;
		width: 100%;
		top: var(--status-bar-height);
		/* #ifdef MP-WEIXIN */
		top: 0;

		/* #endif */
		.title-c {
			width: 100%;
			display: flex;
			justify-content: space-evenly;
			margin-top: 30rpx;

			.mid {
				width: 60%;
				color: #fff;
				text-align: center;
				margin-left: 70rpx;
				display: flex;
				justify-content: space-evenly;

				.active {
					padding-bottom: 15rpx;
					border-bottom: 3px solid #fff;
				}

			}

			.right {

				:nth-child(1) {
					margin-right: 45rpx;
				}
			}

			image {
				height: 42rpx;
				width: 42rpx;
			}
		}

	}

	.page-section-spacing {
		height: 519rpx;

		.swiper {
			width: 100%;
			height: 516rpx;

			.swiperimg {
				width: 100%;
				height: 516rpx;
				border-radius: 0 0 20px 20px;
			}
		}
	}

	.center {
		background: #f1ece7;
		padding-bottom: 30rpx;
	}

	.akey {
		height: 50rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;

		.left {
			font-size: 32rpx;
			color: #3E3E3E;
			font-weight: bolder;
			margin-left: 40rpx;
		}

		.right {
			margin-right: 40rpx;
			font-size: 26rpx;
			overflow: hidden;
			color: #8C8C8C;

			image {

				height: 35rpx;
				width: 25rpx;
			}
		}
	}

	.category {
		height: 290rpx;

		width: 100%;
		display: flex;
		overflow-x: auto;
		overflow-y: hidden;

		.category-c {
			height: 100%;
			margin: 0 22rpx;
			width: 208rpx;
			flex-shrink: 0;

			.picutre {
				width: 100%;
				height: 140rpx;
				background: #fff;
				margin: 0 auto;

				image {
					margin-left: 32rpx;
					margin-top: 52rpx;
					width: 144rpx;
					height: 124rpx;
				}

			}

			.title-a {
				color: #fff;
				margin-top: 82rpx;

				text-align: center:nth-child(1) {
					font-size: 26rpx;
					color: #3E3E3E;
					font-weight: bolder;
				}

				:nth-child(2) {

					font-size: 20rpx;
					color: #B0B0B0;
				}
			}
		}
	}

	.characteristic {
		padding-top: 30rpx;
		margin-top: 94rpx;
		height: 300rpx;
		width: 100%;
		display: flex;
		overflow-x: auto;
		overflow-y: hidden;
		border-radius: 10rpx;

		.characteristic-c {
			width: 590rpx;
			height: 280rpx;
			margin-left: 40rpx;
			display: flex;
			justify-content: space-around;
			flex-shrink: 0;
			background: #fff;
			border-radius: 20rpx;

			.charactpicture {
				width: 194rpx;
				height: 280rpx;
				margin-left: 44rpx;
				margin-top: -30rpx;

				image {

					border-radius: 20rpx;
					width: 100%;
					height: 100%;
				}
			}

			.title-d {
				width: 40%;
				height: 100%;

				margin-top: 50rpx:nth-child(1) {
					font-weight: bolder;
					font-size: 26rpx;
					color: #3E3E3E;
					letter-spacing: 1.86rpx;
				}

				:nth-child(2) {
					font-size: 18rpx;
					color: #B0B0B0;
					letter-spacing: 1.29rpx;
				}
			}
		}
	}

	.center-b {
		background: #f1ece7;
	}

	.greentitle {
		height: 200rpx;
		width: 100%;
		background: #1e2622;
		border-radius: 0 0 20rpx 20rpx;



	}

	.details-a {
		width: 670rpx;
		height: 612rpx;
		margin: 0 auto;
		margin-top: 60rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		position: relative;

		.on {
			height: 426rpx;
			width: 100%;


			image {

				width: 100%;
				height: 100%;
			}
		}

		.qiu {
			width: 36rpx;
			height: 36rpx;
			border-radius: 50%;
			margin-left: 60rpx;
			top: 410rpx;
			position: absolute;

			background-color: #354e44;
		}

		.under {
			overflow: hidden;
			height: 186rpx;
			width: 100%;

			text-align: center;

			background: #fff:nth-child(1) {
				margin-top: 40rpx;
				font-size: 32rpx;
				color: #3E3E3E;
				font-weight: bolder;
			}

			:nth-child(2) {
				margin-top: 20rpx;
				font-size: 22rpx;
				color: #B1B1B1;
			}
		}
	}
</style>
	